<script lang="ts">
import { dialogEmits, dialogProps, useDialog } from "@/components/dialog";
import ElIcon from "@/components/icon";
import ElOverlay from "@/components/overlay";
import { TrapFocus } from "@/directives";
import { Close } from "@element-plus/icons-vue/dist/types";
import { computed, defineComponent, PropType, ref, SetupContext } from "vue";

type DrawerDirection = "ltr" | "rtl" | "ttb" | "btt";

export default defineComponent({
  name: "ElDrawer",
  components: { ElOverlay, ElIcon, Close },
  directives: {
    TrapFocus,
  },
  props: {
    ...dialogProps,
    direction: {
      type: String as PropType<DrawerDirection>,
      default: "rtl",
      validator: (val: DrawerDirection) => {
        return ["ltr", "rtl", "ttb", "btt"].indexOf(val) !== -1;
      },
    },
    size:{
      type:[String,Number],
      default:'30%'
    },
    withHeader:{
      type:Boolean,
      default:true
    },
    modalFade:{
      type:Boolean,
      default:true
    }
  },
  emits:dialogEmits,
  setup(props,ctx) {
    const drawerRef = ref<HTMLElement>(null);
    return {
       ...useDialog(props, ctx as SetupContext, drawerRef),
      drawerRef,
      isHorizontal: computed(
        () => props.direction === 'rtl' || props.direction === 'ltr'
      ),
      drawerSize: computed(() =>
        typeof props.size === 'number' ? `${props.size}px` : props.size
      ),
    }
  },
});
</script>
